﻿@model MobileWebsiteGenerator.Models.MainViewModel
           <style type="text/css">

/* Let's get this party started */
::-webkit-scrollbar {
    width: 5px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}

    #PageContainer
    {
       background-color: @Model.MyTheme.backgroundColor;
   background-image:url('@Url.Content("~/uploads/" + Model.MyTheme.backgroundImage)');
        border: 1px solid #fff;        
        margin: 0px;
        padding: 0px;
        width: 230px;
        margin-left:2px;
    
       position:relative;
    }
    #PageContainer span
    {
        line-height: 20px;
        letter-spacing: 1px;
        margin-top: 15px;
    }
    #header
    {
         background-color: @Model.MyTheme.Headercolor;
        height: 40px;
        vertical-align:top;  
        margin-top:-15px;
        
 color: white;
        background-image: url('@Url.Content("~/uploads/" + Model.MyTheme.HeaderImage)');
        text-align: center;
    }
    .footer
    {
        height: 40px;
        text-align: center;
           vertical-align:bottom;
        color: white;
        margin-top:7px;
    
      
        
        background-color: Black;
    }
    ul.metroui-list1
    {
        list-style: none;
        padding: 0;
        margin: 3;
    }
    #content
    {
     width:225px;
height:215px;
overflow-y: scroll;
    }
ul.metroui-list1 li { 

width:110px;
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #350505;
	color: #fff;
	cursor: pointer;
	text-decoration:none;
	text-align:center;
	color:#fff;
	font-size:18px;
			border-radius:3px;
}
a,a:active,a:visited
{
	text-decoration:none;
	color:#FFF;
}

ul.metroui-list1 li:hover {
	background-color: #BCA4A4;
    color:#FFF;
}

li.metroui-list1-selected {
	background-color:#4e534b !important;
	color: #fff;
}
</style>


<table style="margin-left: 100px;" width="262" border="0" cellpadding="0" cellspacing="0">

    <tr>
        <td colspan="3">
            <img src="@Url.Content("~/Images/Untitled-1_01.gif")" width="262" height="90" alt="">
        </td>
        <td>
            <img src="@Url.Content("~/Images/spacer.gif")" width="1" height="90" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img src="@Url.Content("~/Images/Untitled-1_02.gif")" style="margin-top:-12px;" width="12" height="310" alt="">
        </td>
        <td>
            <div id="PageContainer">
                <div style="top: 0px; width: auto; position: static;" id="header">
                    <h4 id="headertext">@Model.MyTheme.HeaderText</h4>
                </div>
                <div id="content">
                    @Html.Partial("_Pages", Model)
                </div>
                <div class="footer">
                    <h4 id="footertext">
                        @Model.MyTheme.Footertext</h4>
                </div>
            </div>
        </td>
        <td rowspan="2">
            <img src="@Url.Content("~/Images/Untitled-1_04.gif")" style="margin-top:-12px;" width="12" height="347" alt="">
        </td>
        <td>
            <img src="@Url.Content("~/Images/spacer.gif")" width="1" height="310" alt="">
        </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="@Url.Content("~/Images/Untitled-1_05.gif")" style="margin-top:-24px;" width="250" height="123" alt="">
        </td>
        <td>
            <img src="@Url.Content("~/Images/spacer.gif")" width="1" height="37" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img src="@Url.Content("~/Images/Untitled-1_06.gif")" style="margin-top:-30px;" width="12" height="86" alt="">
        </td>
        <td>
            <img src="@Url.Content("~/Images/spacer.gif")" width="1" height="86" alt="">
        </td>
    </tr>
</table>
